<template>
  <a-modal
    :visible="modelValue"
    top="10vh"
    width="80%"
    :align-center="false"
    @ok="cancel"
    @cancel="cancel"
  >
    <template #title> 详情 </template>
    <standard-table
      ref="compStandardTable"
      v-model:selectedKeys="nowSelectedKeys"
      :component-config="tableComponentConfig"
      :render-config="tableRenderConfig"
      :render-keys="tableRenderKeys"
      :loading="loading"
      :data="data"
      :total="total"
      :row-selection-type="rowSelectionType"
      :columns="columns"
      @init-columns-end="initColumns"
      @selection-change="selectionChange"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
    >
    </standard-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import standardTable from '@/common/components/standard-table/index.vue';
  import lodash from 'lodash';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };

  const rowSelectionType = {
    type: 'checkbox',
  };

  const data = reactive([
    {
      id: 1,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 12,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 13,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
  ]);
  const getTableData = () => {
    console.log(1);
  };
  const pageChange = () => {
    getTableData();
  };
  const pageSizeChange = () => {
    getTableData();
  };
</script>
